<template>
  <div class="content">
    <van-nav-bar
      left-arrow
      :title="locaCity.name"
      right-text="切换城市"
      @click-left="$router.back()"
      @click-right="$router.push('/citylist')"
    >
    </van-nav-bar>
    <div class="search">
      <van-cell-group>
        <van-field
          v-model="city"
          placeholder="输入学校、商务楼、地址"
          @input="cityInput(locaCity.id)"
        />
      </van-cell-group>
      <van-button type="info" block @click="addloca(locaCity.id)"
        >提交</van-button
      >
    </div>
    <div class="history" v-if="isShow">
      <p>搜索历史</p>
      <div class="seat">
        <div
          @click="tohistory(index)"
          class="seat-history"
          v-for="(item, index) in placeHistory"
          :key="index"
        >
          <h1>{{ item.name }}</h1>
          <span>{{ item.address }}</span>
        </div>
        <div class="clear" v-if="placeHistory.length != 0" @click="clear">
          清空所有
        </div>
      </div>
    </div>
    <!-- 搜索的所有地址信息 -->
    <div
      class="seat-history"
      v-for="(item, index) in address"
      :key="index"
      @click="searchHistory(item)"
      v-else
    >
      <h1>{{ item.name }}</h1>
      <span>{{ item.address }}</span>
    </div>
  </div>
</template>

<script>
import { singleCity, detailCity } from "@/api/citylist.js";
export default {
  data() {
    return {
      locaCity: {}, // 保存城市的所有信息
      city: "", // 绑定input输入的值
      address: [], // 搜索时返回的地址信息
      isShow: true, // 判断显示历史记录还是搜索信息
      // 保存搜索历史信息
      placeHistory: JSON.parse(localStorage.getItem("placeHistory")) || [],
    };
  },
  created() {
    // 请求某个城市的所有信息
    singleCity(this.$route.query.id).then((res) => {
      console.log(res);
      this.locaCity = res.data;
    });
  },
  methods: {
    // 封装搜索地址
    getSearch(id) {
      detailCity({
        city_id: id,
        keyword: this.city,
      }).then((res) => {
        console.log(res);
        this.address = res.data;
        this.isShow = false;
      });
    },
    // 按钮搜索事件
    addloca(id) {
      if (!this.city) {
        this.$toast.fail("请填写地址");
        return;
      }
      this.getSearch(id);
    },
    // 点击搜索结果保存数据并跳转到首页
    searchHistory(item) {
      this.placeHistory.push(item);
      // for(let i =0;i<this.placeHistory.length;i++){
      //    if (this.placeHistory[i].name != item.name) {
      //     console.log(99);
      //     this.placeHistory.push(item);
      //     return
      //   }
      // }
      let num= this.placeHistory.findIndex(obj=>{
        obj.name==item.name
      })
      console.log(107,num);

      localStorage.setItem("placeHistory", JSON.stringify(this.placeHistory));
      this.isShow = true;
      let geohash = item.geohash;
      this.$router.push({
        path: "/layout/index",
        query: { geohash },
      });
      console.log(this.placeHistory);
      this.city = "";
    },
    // 清除历史记录
    clear() {
      localStorage.removeItem("placeHistory");
      this.placeHistory = [];
    },
    // 输入框事件
    cityInput(id) {
      if (!this.city) {
        this.isShow = true;
        return;
      }
      this.getSearch(id);
    },
    // 点击历史记录跳转到首页
    tohistory(index) {
      let geohash = this.placeHistory[index].geohash;
      this.$router.push({
        path: "/layout/index",
        query: { geohash },
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #3190e8;
  border-bottom: 1px solid #d4d3d3;
  .van-icon {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
}
.search {
  margin-top: 10px;
  background-color: #fff;
  padding: 10px 20px;
  .van-field {
    border: 1px solid #ccc;
    margin-bottom: 15px;
  }
}
.history {
  p {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    padding-left: 15px;
    border-bottom: 1px solid #ccc;
  }
  .seat-history {
    background-color: #fff;
    height: 60px;
    padding: 10px 20px;
    h1 {
      margin: 10px 0;
      font-size: 16px;
    }
    span {
      font-size: 13px;
      color: #ccc;
    }
  }
  .clear {
    border-top: 1px solid #ccc;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    background-color: #fff;
    text-align: center;
  }
}
.seat-history {
  background-color: #fff;
  height: 60px;
  padding: 10px 20px;
  border-top: 1px solid #ccc;
  h1 {
    margin: 10px 0;
    font-size: 16px;
  }
  span {
    font-size: 13px;
    color: #ccc;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>